// Home.jsx
import React, { useEffect, useState } from 'react';
import { 
  TextField, Button, Card, CardContent, 
  Typography, Box, Avatar, ImageList, ImageListItem
} from '@mui/material';
import { useNavigate } from 'react-router-dom';

const Home = () => {
  const navigate = useNavigate();
  const [posts, setPosts] = useState([]);

  // 加载本地存储的动态数据
  useEffect(() => {
    const loadPosts = () => {
      const storedPosts = localStorage.getItem('posts');
      if (storedPosts) {
        setPosts(JSON.parse(storedPosts));
      }
    };
    loadPosts();
  }, []);

  return (
    <div className="home-page" style={{ maxWidth: '1200px', margin: '0 auto' }}>
      <div style={{ margin: '20px 0', padding: '0 20px' }}>
        <TextField
          fullWidth
          placeholder="搜索用户、话题或群组"
          variant="outlined"
          sx={{ backgroundColor: 'white', borderRadius: '8px' }}
        />
      </div>

      <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '0 20px', marginBottom: '20px' }}>
        <Button
          variant="contained"
          color="primary"
          onClick={() => navigate('/postcreate')}
        >
          创建动态
        </Button>
      </div>

      <div className="feed-content" style={{ padding: '0 20px' }}>
        <h2 style={{ color: '#2c3e50', marginBottom: '20px' }}>最新动态</h2>
        {posts.map(post => (
          <Card key={post.id} variant="outlined" sx={{ 
            backgroundColor: 'white', 
            borderRadius: '8px', 
            marginBottom: '15px', 
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
            padding: '20px'
          }}>
            <div className="post-header" style={{ display: 'flex', alignItems: 'center', marginBottom: '15px' }}>
              <Avatar src={post.user.avatar} sx={{ marginRight: '10px' }} />
              <div>
                <Typography variant="subtitle2" style={{ color: '#34495e' }}>
                  {post.user.name}
                </Typography>
                <Typography variant="caption" style={{ color: '#7f8c8d' }}>
                  {new Date(post.timestamp).toLocaleString('zh-CN', { 
                    hour12: false, 
                    year: 'numeric', 
                    month: '2-digit', 
                    day: '2-digit', 
                    hour: '2-digit', 
                    minute: '2-digit' 
                  })}
                </Typography>
              </div>
            </div>

            <Typography variant="body1" style={{ color: '#2c3e50', lineHeight: '1.6', marginBottom: '15px' }}>
              {post.content}
            </Typography>

            {/* 媒体文件展示 */}
            {post.media.length > 0 && (
              <Box sx={{ width: '100%', overflowX: 'auto' }}>
                <ImageList sx={{ width: '100%', maxHeight: '200px' }} cols={post.media.length > 3 ? 3 : post.media.length}>
                  {post.media.map((media, index) => (
                    <ImageListItem key={index}>
                      {media.type === 'image' ? (
                        <img src={media.url} alt="post-image" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                      ) : (
                        <video controls src={media.url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                      )}
                    </ImageListItem>
                  ))}
                </ImageList>
              </Box>
            )}
          </Card>
        ))}
      </div>

      <button
        className="create-post-btn"
        style={{ 
          position: 'fixed', 
          bottom: '20px', 
          right: '20px', 
          padding: '12px 24px', 
          backgroundColor: '#3498db', 
          color: 'white', 
          border: 'none', 
          borderRadius: '8px', 
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)', 
          cursor: 'pointer', 
          transition: 'background-color 0.3s',
          display: 'flex',
          alignItems: 'center',
          gap: '8px'
        }}
        onClick={() => navigate('/postcreate')}
      >
        <span>创建动态</span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" style={{ width: '18px' }}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
      </button>
    </div>
  );
};

export default Home;